Improve the appearance of the ✅Talk List Dialog

Improve the appearance of the Talk List Dialog

after

https://gyazo.com/de44ba66120e18f25139076911555b8e

before

https://gyazo.com/6047f8b775caaac14548d4269dbbd426

Thoughts.

Margins at the beginning of the list are useless.

If the title is a link, is the ShowLog button unnecessary?

But is explicit manipulation easier to understand than implicit manipulation?

It would be easier to see if the head is aligned if the line breaks before the title.

Margin between items

https://gyazo.com/03b898f38898492d41187a402811254e

I'm not using it on my development PC, so the data is crappy.

https://gyazo.com/e75003e48602dd888f884998222b72ce

I tried to temporarily display a title that looks like it.

Try iPhone X size

https://gyazo.com/7a9ed73db37187fa97135422b7c8468f

Hmmm, the button shrinking and the text sticking out is subtle.

Pattern with buttons enclosed in divs

https://gyazo.com/1d2e04258b1debdabaf7600c787dad62

Patterns out of ListItem

https://gyazo.com/7ef8149fcd704898eb5abafb14994b6a

I prefer the former.

The button shrinks because the parent has flex on it.

buttons with align-items: flex-end; and aligned at the bottom

https://gyazo.com/ae01e39e383ecb4621a638308abf68e2

Confirmation with actual equipment

https://gyazo.com/0771827811547cdaf231128ea8e29856

Ah, that's what happens when the length of the text is mixed.

I'd like to bring the talk list stored on my phone's local storage to the development PC to try it out.

I was able to reproduce it on a development PC.

https://gyazo.com/3f100bfa6f94e76c94c4a94872e931c2

I was thinking that if I could have a row of buttons to save space, I'd prefer to have a row of buttons, but that's not so good.

https://gyazo.com/9be9d3c4d133665f3631747ba425bbce

Buttons sticking out above text is tacky.

https://gyazo.com/6275055b1929fe2c402324a572658b9e

Lightly ink the list area and add a shadow similar to that of a button.

background: #eee;

box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);

It's done.

https://gyazo.com/de44ba66120e18f25139076911555b8e

State of div.

---